import React from 'react';
import {render} from 'react-dom';
import {StyleSheet, Text, View, Pressable} from 'react-native';
import DraggableFlatList from './DraggableFlatList';

const data = [1, 2, 3, 5, 6, 7, 8, 9];

const Screen = () => {
  const renderItem = ({item, index, drag}) => {
    return (
      <Pressable key={index} onLongPress={drag} style={styles.block}>
        <Text>here is a block text</Text>
      </Pressable>
    );
  };

  return (
    <DraggableFlatList
      style={{flex: 1}}
      data={data}
      renderItem={renderItem}
      keyExtractor={(item, index) => `draggable-item-${index}`}
    />
  );
};

export default Screen;

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#ddd',
    flex: 1,
  },
  block: {
    height: 100,
    width: '100%',
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
